<template>
  <div class="dictionary">
    <!--1.搜索框-->
    <div style="padding: 10px">
      <el-button type="primary"  size="mini" @click="toSave('0')">添加跟节点</el-button>
    </div>
    <!--2.列表-->
    <el-row>
      <el-table :data="menuTree" style="width: 100%;" :header-cell-style="{background:'#F5F5F5'}" row-key="menuId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="menuName" label="名称" width="300" >
        </el-table-column>
        <el-table-column  label="类型"  width="70">
          <template slot-scope="scope">
            {{scope.row.type=='0'?"菜单":"功能"}}
          </template>
        </el-table-column>
        <el-table-column prop="url" label="URL路径"  width="300" >
        </el-table-column>
        <el-table-column prop="permissionCode" label="权限code"  width="300">
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="70" >
        </el-table-column>
        <el-table-column label="状态"  width="70" >
          <template slot-scope="scope">
            {{scope.row.status=='0'?"启用":"禁用"}}
          </template>
        </el-table-column>
        <el-table-column label="操作"   width="70">
          <template slot-scope="scope">
                <el-button v-if="cannotBeDisabled.indexOf(scope.row.menuName)<0" type="primary" size="mini" @click="changeStatus(scope.row)">{{scope.row.status=='0'?'禁用':'启用'}}</el-button>
          </template>
        </el-table-column>
        <el-table-column width="70" >
          <template slot-scope="scope" >
            <el-button type="primary" size="mini" @click="toSave('1',scope.row)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.row.type=='0'" type="primary" size="mini" @click="toSave('2',scope.row)">添加节点</el-button>
          </template>
        </el-table-column>
        <el-table-column >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="deleteMenu(scope.row.menuId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!--4.编辑窗口-->
    <el-dialog title="编辑" :visible.sync="saveDialog"  width="30%" append-to-body :close-on-click-modal="false" @close="clearMenuEditForm" >
      <el-form ref="menuEditForm"  label-width="86px" label-position="left" :model="saveData" :rules="saveRules">
        <el-form-item label="父级菜单" v-if="saveData.parentName">
          <span>{{saveData.parentName}}</span>
        </el-form-item>
        <el-form-item label="名称" prop="menuName">
          <el-input v-model.trim="saveData.menuName" placeholder="请输入名称" show-word-limit :maxlength="20"/>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="saveData.type" placeholder="请输入类型">
            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="URL路径" prop="url">
          <el-input v-model.trim="saveData.url" placeholder="请输入URL路径" show-word-limit :maxlength="100"/>
        </el-form-item>
        <el-form-item label="权限code" prop="permissionCode">
          <el-input v-model.trim="saveData.permissionCode" placeholder="请输入权限code" show-word-limit :maxlength="100"/>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="saveData.sort"   placeholder="请输入排序值" show-word-limit :maxlength="20" type="tel" onkeyup="value=value.replace(/[^\d]/g,'')" />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="saveDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveMenu">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'systemMenu',
    props: {},
    data() {
      return {
        menuTree:[],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        //是否展示编辑框
        saveDialog: false,
        saveType:'',
        // 编辑框数据
        saveData: {
          menuId: '',
          menuName: '',
          parentName:'',
          parentId: '',
          permissionCode: '',
          remark: '',
          type:'0',
          sort:'1',
          url: ''
        },
        saveRules: {
          menuName: [
            { required: true, message: '请输入字典名称', trigger: 'blur' },
            { max: 5, message: '字典名称不能超过10 个字符', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择菜单类型', trigger: 'blur' }
          ],
          sort: [
            { required: true, message: '请输入菜单排序值', trigger: 'blur' }
          ]

        },
        // 字典状态类型下拉选择
        typeList: [{value: '0', label: '菜单'},{value: '1', label: '功能'} ],
        statusList: [{value: '0', label: '启用'},{value: '1', label: '禁用'}],
        debug: true,
        cannotBeDisabled:['权限管理','业务配置','系统管理','菜单管理']
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() { // 渲染后执行
      // 查询数据
      this.getMenuTree();
    },
    methods: {
      //修改菜单状态
      changeStatus(data){
        let status=data.status=='0'?'1':'0'
        this.$api.menu.changeStatus({status:status,menuId:data.menuId}).then(resp => {
          this.getMenuTree();
        })
      },
      //菜单接口
      getMenuTree(){
        this.$api.menu.tree(this.queryData).then(resp => {
          this.menuTree = resp;
        })
      },
      //弹出编辑窗口
      toSave(type,data){
        if(type=='1'){
           this.saveData=JSON.parse(JSON.stringify(data));
        }
        if(type=='2'){
          this.saveData.parentId=data.menuId;
          this.saveData.parentName=data.menuName;
        }
        this. saveDialog=true;
      },
      //删除
      deleteMenu(menuId){

      },
      // 点击保存编辑字典项
      saveMenu() {
        this.$refs.menuEditForm.validate(async (valid) => {
          if (valid) {
            this.$api.menu.save(this.saveData).then(resp => {
              this.saveDialog = false
              this.getMenuTree();
            })
          } else {
            return false
          }
        })
      },
      clearMenuEditForm(){
        this.saveData={
          menuId: '',
          menuName: '',
          parentName:'',
          parentId: '',
          permissionCode: '',
          remark: '',
          type:'0',
          status: '0',
          sort:'1',
          url: ''
        }
        this.$nextTick(() => {
          this.$refs.menuEditForm.clearValidate()
        })

        this.saveDialog = false
      },

    },

  }
</script>

<style scoped lang="scss">
  .dictionary {
    padding: 20px;
  }
  .tree-head {
    height: 48px;
    background-color: #EDEDED;
    color: #999;
    padding-left: 10px;
    font-weight:bold
  }

</style>
